import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:yp/config/index.dart';
import 'package:yp/widgets/button_widget.dart';
import 'package:yp/widgets/index.dart';

/// 结算商品列表
class SettleList extends StatefulWidget {
  const SettleList({Key key}) : super(key: key);

  @override
  _SettleListState createState() => _SettleListState();
}

class _SettleListState extends State<SettleList>
    with SingleTickerProviderStateMixin {
  TabController _controller;
  // var _tabList = [Tab(text: '包裹一'), Tab(text: '包裹二')];
  // 只有一个时不显示头部
  var _tabList = [Tab(text:'')];

  List _goodsList = [
    {'gift': false},
    {'gift': true},
    {'gift': false},
    {'gift': true},
    {'gift': false},
    {'gift': false},
    {'gift': false}
  ];

  @override
  void initState() {
    super.initState();

    _controller =
        TabController(initialIndex: 0, length: _tabList.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YPNavigationBar('商品列表'),
      body: Column(
        children: [
          _tabHeadder(),
          _goodsInfo(),
        ],
      ),
    );
  }

  ///  tab栏切换的头部
  Widget _tabHeadder() {
    return Visibility(
      visible: _tabList.length > 1,
      child: Stack(children: [
        Container(
          color: EsColors.White,
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: ExtendedTabBar(
            tabs: List<Widget>.generate(
                _controller.length, (int index) => _tabList[index]),
            controller: _controller,
            labelPadding: EdgeInsets.zero,
            labelColor: EsColors.Primary,
            isScrollable: _controller.length > 5,
            unselectedLabelColor: EsColors.TitleSecondary,
            indicatorSize: TabBarIndicatorSize.label,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            indicator: const ExtendedUnderlineTabIndicator(
                // size: 30,
                borderSide: BorderSide(color: EsColors.Primary, width: 2)),
          ),
        ),
        Positioned(
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,
            child: ListView.separated(
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => SizedBox(
                    width: MediaQuery.of(context).size.width / _tabList.length -
                        10),
                separatorBuilder: (context, index) =>
                    Container(color: EsColors.BackGround, width: 1),
                itemCount: _tabList.length))
      ]),
    );
  }

  /// 店铺&商品信息
  Widget _goodsInfo() {
    return Expanded(
      child: TabBarView(
          controller: _controller,
          children: List<Widget>.generate(
              _controller.length,
              (int index) => ListView.separated(
                  padding: EdgeInsets.zero,
                  itemBuilder: (context, index) {
                    return _goodsItem(_goodsList[index]['gift']);
                  },
                  separatorBuilder: (context, index) {
                    return YpLine(indent: 12);
                  },
                  itemCount: _goodsList?.length ?? 0)).toList()),
    );
  }

  /// 商品条目
  Widget _goodsItem(bool gift) {
    return Container(
      color: EsColors.White,
      padding: const EdgeInsets.only(top: 12, left: 12, right: 12, bottom: 10),
      child: Row(children: [
        CachedImage(
            width: 70,
            height: 70,
            margin: EdgeInsets.fromLTRB(0, 10, 8, 12),
            scale: BoxFit.cover,
            path:
                'http://imgservice.suning.cn/uimg1/b2c/image/LbK15Wx6ONCA2R1lpJXkOg.jpg_800w_800h_4e'),
        SizedBox(width: 6),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Stack(
                children: [
                  Text(
                    (gift ? '        ' : '') +
                        'Nature Republic自然共和国院子然可原芦荟胶补水面膜面膜',
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: EsColors.TitleSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                  Positioned(
                    child: Visibility(
                      visible: gift,
                      child: Container(
                        padding:
                            EdgeInsets.symmetric(vertical: 0, horizontal: 3),
                        margin: EdgeInsets.only(right: 4, top: 3),
                        decoration: BoxDecoration(
                          color: EsColors.Pink.withOpacity(0.15),
                          border: Border.all(
                            color: EsColors.Pink,
                            width: 1,
                          ),
                          borderRadius: BorderRadius.circular(3),
                        ),
                        child: Text(
                          '赠品',
                          style: TextStyle(
                              color: EsColors.Pink,
                              fontSize: EsSizes.XXS,
                              fontWeight: EsFontWeights.Normal),
                        ),
                      ),
                    ),
                  )
                ],
              ),
              Padding(
                padding: const EdgeInsets.only(top: 2, bottom: 10),
                child: Text(
                  '22超大风量+挥手智控...',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: EsColors.Content,
                      fontSize: EsSizes.XS,
                      fontWeight: EsFontWeights.Normal),
                ),
              ),
              Row(
                children: [
                  Text('￥22489.00',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          fontSize: EsSizes.MD,
                          color: EsColors.Primary,
                          fontWeight: EsFontWeights.Medium)),
                  SizedBox(width: 10),
                  Expanded(
                    child: Text('x1',
                        textAlign: TextAlign.end,
                        style: TextStyle(
                            fontSize: EsSizes.SM,
                            color: EsColors.ContentSecondary,
                            fontWeight: EsFontWeights.Normal)),
                  )
                ],
              ),
            ],
          ),
        ),
      ]),
   
    );
  }
}
